<template>
<div id="box">
  <div id="form">
    <p style="text-align: center; font-size:150%;padding-bottom: 3%">{{loginState}}</p>
    <div><el-input
      placeholder="请输入账号"
      v-model="form.email"
      clearable
    >
      <template slot="prepend">用户</template>
    </el-input>
    </div>
    <div>
      <el-input placeholder="请输入密码" v-model="form.password" show-password>
        <template slot="prepend">密码</template>
      </el-input>
    </div>
    <div style="text-align: center">
    <el-button type="primary" @click="changeState()" >{{State}}</el-button>
    <el-button @click="commit()">{{loginState}}</el-button>
    </div>
  </div>
</div>
</template>

<script>
import {
  login,
  register
} from '../../api/Login'
import SIdentify from '@/components/login/identify.vue'

import { Message } from 'element-ui'
export default {
  name: 'Login',
  data () {
    return {
      checkCode: '',
      loginState: '登陆',
      State: '注册',
      form: {
        id: '',
        email: '',
        password: ''
      }
    }
  },
  methods: {
    changeState () {
      if (this.loginState === '登陆') {
        this.loginState = '注册'
        this.State = '登陆'
      } else {
        this.loginState = '登陆'
        this.State = '注册'
      }
      this.form.email = ''
      this.form.password = ''
    },
    commit () {
      var self = this
      const para = {
        datajson: this.form
      }
      if (this.loginState === '登陆' & this.State === '注册') {
        this.form.email = ''
        this.form.password = ''
        login(para).then(res => {
          Message({
            message: res.data,
            type: 'success',
            duration: 5 * 1000
          })
          self.$router.push('/main')
        })
      } else {
        register(para).then(res => {
          if (res.data.successFlg) {
            Message({
              message: res.data,
              type: 'success',
              duration: 5 * 1000
            })
          } else {
            Message({
              message: '账户已存在！',
              type: 'error',
              duration: 5 * 1000
            })
          }
        })
      }
    }
  },
  components: {
    SIdentify
  }
}
</script>

<style scoped>
  #box, #form::before {
    position: absolute;
    width: 100%;
    height: 100%;
    background:url("../../assets/1213.png") no-repeat;
    background-size:cover;
  }
  #form {
    position: absolute;
    width: 20%;
    height: 35%;
    top: 30%;
    left: 65%;
    padding-left: 2%;
    padding-top: 1%;
    padding-right: 2%;
    color: #5cadff;
    border-radius: 20px;
    overflow: hidden;
    z-index: 2;
  }
  #form::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    filter: blur(10px);
    margin: -20px;
    z-index: -1;
  }
  #form div {
    padding-bottom: 3%;
  }
</style>
